<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { SubTypeItem } from '@/types/hot'
//热门推荐页接口
import { getHotRecommendAPI } from '@/services/hot.ts'

const urlMap = [
  {
    type: '1',
    title: '特惠推荐',
    url: '/hot/preference',
  },
  {
    type: '2',
    title: '爆款推荐',
    url: '/hot/inVogue',
  },
  {
    type: '3',
    title: '一站买全',
    url: '/hot/oneStop',
  },
  {
    type: '4',
    title: '新鲜好物',
    url: '/hot/new',
  },
]
//获取屏幕高度
const screenHeight = uni.getWindowInfo().windowHeight
//获取头部高度
const headerHeight = ref(0)
uni.createSelectorQuery().select('.header').boundingClientRect(rect => {
  //console.log('height：', rect); // 输出元素的高度
  headerHeight.value = Number('height' in rect ? rect.height : '')
}).exec();
// 定义加载gif图变量
const skeletonLoading = ref(false)
// 当前下拉刷新状态
const isTriggered = ref(false)

// uniapp获取页面参数
const query = defineProps<{
  type: string
}>()
//console.log('传参=', query)
// 查找数组里面的每项跟传参的type值是否一致
const currUrlMap = urlMap.find((v) => v.type === query.type)
// 动态设置标题
uni.setNavigationBarTitle({
  title: currUrlMap!.title, //非空断言 ！表示一定有值
})
// 推荐封面图
const bannerPicture = ref('')
// 推荐选项
const subTypes = ref<(SubTypeItem & { finish?: boolean })[]>([]) //交叉类型&，并拼凑在一起后的类型数组()[]
// 高亮的下标
const activeIndex = ref(0)
// 获取热门推荐数据接口
const getHotRecommendData = async () => {
  const res = await getHotRecommendAPI(currUrlMap!.url, {
    //技巧：环境变量，开发环境，修改初始页面方便测试分页结束
    page: import.meta.env.DEV ? 30 : 1, //import.meta.env环境：DEV开发环境，PROD生产环境
    pageSize: 10,
  })
  //console.log('热门推荐数据=', res.result)
  bannerPicture.value = res.result.bannerPicture
  subTypes.value = res.result.subTypes
}

// 页面加载时触发
onLoad(() => {
  getHotRecommendData()
})
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开始动画
  isTriggered.value = true
  skeletonLoading.value = true
  // 同时请求多个接口, 等待所有接口都返回之后才关闭动画
  await Promise.all([getHotRecommendData()])
  // 关闭动画
  isTriggered.value = false
  skeletonLoading.value = false
}
// 滚动触底
const onScrollToLower = async () => {
  // 获取当前选项
  const currsubTypes = subTypes.value[activeIndex.value]
  //分页条件
  if (currsubTypes.goodsItems.page < currsubTypes.goodsItems.pages) {
    //  当前页码累加
    currsubTypes.goodsItems.page++
  } else {
    //  标记已结束
    currsubTypes.finish = true
    //  退出并轻提示
    return uni.showToast({
      title: '没有更多数据了',
      icon: 'none',
      duration: 2000,
    })
  }

  //  调用AIP传参
  const res = await getHotRecommendAPI(currUrlMap!.url, {
    subType: currsubTypes.id,
    page: currsubTypes.goodsItems.page,
    pageSize: currsubTypes.goodsItems.pageSize,
  })
//  提取新数据
  const newsubTypes = res.result.subTypes[activeIndex.value]
//  数组追加
  currsubTypes.goodsItems.items.push(...newsubTypes.goodsItems.items)
}
</script>

<template>
  <view class="viewport">
    <!--头部高度-->
    <view class="header">
      <!-- 推荐封面图 -->
      <view class="cover">
        <image :src="bannerPicture"></image>
      </view>
      <!-- 推荐选项 -->
      <view class="tabs">
        <text
          v-for="(item, index) in subTypes"
          :key="item.id"
          class="text"
          :class="{ active: index === activeIndex }"
          @tap="activeIndex = index"
        >{{ item.title }}</text
        >
      </view>
    </view>

    <!--滚动区域-->
    <view clss="scroll-box" :style="{ height: screenHeight - Number(headerHeight) + 'px' }">
      <!-- 推荐列表 -->
      <scroll-view
        v-for="(item, index) in subTypes"
        :key="item.id"
        v-show="activeIndex === index"
        scroll-y
        class="scroll-view"
        :refresher-enabled="true"
        :refresher-triggered="isTriggered"
        @refresherrefresh="onRefresherrefresh"
        @scrolltolower="onScrollToLower"
      >
        <!-- 加载中提示 -->
        <view class="lanjiazai_wrap" v-if="skeletonLoading">
          <view class="lanjiazai_item">
            <view class="loading_icon">
              <image src="../../static/images/logo_loading.gif" class="loading_gif"></image>
            </view>
            <view class="tag">加载中...</view>
          </view>
        </view>
        <view class="goods">
          <navigator
            hover-class="none"
            class="navigator"
            v-for="goods in item.goodsItems.items"
            :key="goods.id"
            :url="`/pages/goods/goods?id=${goods.id}`"
          >
            <image class="thumb" :src="goods.picture"></image>
            <view class="name ellipsis">{{ goods.name }}</view>
            <view class="price">
              <text class="symbol">¥</text>
              <text class="number">{{ goods.price }}</text>
            </view>
          </navigator>
        </view>
        <view class="loading-text">
          {{ item.finish ? '没有更多数据了~' : '正在加载...' }}
        </view>
      </scroll-view>
    </view>

  </view>
</template>

<style scoped lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  .header {
    height: 300rpx;
    padding: 180rpx 0 0;
    .cover {
      width: 750rpx;
      height: 225rpx;
      border-radius: 0 0 40rpx 40rpx;
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
    }
    .tabs {
      display: flex;
      justify-content: space-evenly;
      height: 100rpx;
      line-height: 90rpx;
      margin: 0 20rpx;
      font-size: 28rpx;
      border-radius: 10rpx;
      box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
      color: #333;
      background-color: #fff;
      position: relative;
      z-index: 9;

      .text {
        margin: 0 20rpx;
        position: relative;
      }

      .active {
        &::after {
          content: '';
          width: 40rpx;
          height: 4rpx;
          transform: translate(-50%);
          background-color: #27ba9b;
          position: absolute;
          left: 50%;
          bottom: 24rpx;
        }
      }
    }
  }
}



.scroll-box {
  flex: 1;
}
.scroll-view {
  flex: 1;
}


.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx 20rpx;

  .navigator {
    width: 345rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }

  .thumb {
    width: 305rpx;
    height: 305rpx;
  }

  .name {
    height: 88rpx;
    font-size: 26rpx;
  }

  .price {
    line-height: 1;
    color: #cf4444;
    font-size: 30rpx;
  }

  .symbol {
    font-size: 70%;
  }

  .decimal {
    font-size: 70%;
  }
}

.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0 50rpx;
}
.lanjiazai_wrap {
  height: calc(100vh);
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #999;
  padding-top: 100rpx;
  .lanjiazai_item {
    text-align: center;
    .loading_icon {
      width: 120rpx;
      height: 120rpx;
      .loading_gif {
        width: 120rpx;
        height: 120rpx;
      }
    }
    .tag {
      margin-top: 8rpx;
      font-size: 24rpx;
    }
  }
}
</style>
